'use client'
import { OrbitControls } from "@react-three/drei";
import { Canvas } from "@react-three/fiber";
import { useRouter } from "next/navigation";
import { EffectComposer, Outline, Selection } from "@react-three/postprocessing";
import styles from "./choose_parts.module.css"
import { KernelSize } from "postprocessing";
import { useState } from "react";
import { ChooseParts } from "../../components/ChooseParts";

enum colors {
    red = 0xFF0000,
    green = 0x00FF00,
    blue = 0x0000FF,
}

export default function Page() {
    const router = useRouter()
    const [color, setColor] = useState(colors.blue)

    const answerParts: string[] = ["left_wing", "right_wing"]
    const selectedParts: string[] = []

    function checkAnswer() {
        answerParts.sort()
        selectedParts.sort()
        console.log(answerParts, selectedParts)
        if (answerParts.toString() == selectedParts.toString()) {
            setColor(colors.green)
            alert("Верно")
            router.back()
        }
        else {
            setColor(colors.red)
            alert("Неверно")          
        }

    }

    return (
        <div className={styles.container}>
            <button onClick={() => router.back()}>
                Вернуться к теме
            </button>
            <p>Выберите крылья</p>
            <button onClick={() => checkAnswer()}>
                Проверить
            </button>
            <div className={styles.canvas}>
            <Canvas camera={{position:[10,10,10]}}>
                <ambientLight intensity={2} />
                <ChooseParts src="/assets/su57_anim.glb" selectedParts={selectedParts} outlineColor={color} onPointerOver={() => (setColor(colors.blue))} />
                <OrbitControls enablePan={false}/>
            </Canvas>
            </div>
        </div>
    )
}